<template>
  <div class="order">
    <div class="box">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="订单号">
          <el-input v-model="formInline.user" placeholder="订单号"></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="formInline.pwd" placeholder="收货人"></el-input>
        </el-form-item>
        <el-form-item label="手机号">
          <el-input v-model="formInline.tel" placeholder="手机号"></el-input>
        </el-form-item>

        <el-form-item label="订单状态">
          <el-select v-model="formInline.region" placeholder="订单状态">
            <el-option label="已受理" value="已受理"></el-option>
            <el-option label="未受理" value="未受理"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
    </div>
    <!-- 时间 -->
    <div class="box6">
      <div class="block">
        <span class="demonstration">选择时间</span>
        <el-date-picker
          value-format="yyyy-MM-dd HH:mm:ss"
          v-model="value1"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        >
        </el-date-picker>
      </div>
      <div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 表格 -->
    <div class="box7">
      <el-table :data="tableData" border style="width: 100%" height="500px">
        <el-table-column prop="orderNo" label="订单号" width="100">
          <template slot-scope="scope">
            {{ scope.row.orderNo }}
          </template>
        </el-table-column>
        <el-table-column prop="orderTime" label="下单时间" width="200">
          <template slot-scope="scope">
            {{ scope.row.orderTime }}
          </template>
        </el-table-column>
        <el-table-column prop="phone" label="手机号" width="150">
          <template slot-scope="scope">
            {{ scope.row.phone }}
          </template>
        </el-table-column>
        <el-table-column prop="consignee" label="收货人" width="100">
          <template slot-scope="scope">
            {{ scope.row.consignee }}
          </template>
        </el-table-column>
        <el-table-column prop="deliverAddress" label="配送地址" width="200">
          <template slot-scope="scope">
            {{ scope.row.deliverAddress }}
          </template>
        </el-table-column>
        <el-table-column prop="deliveryTime" label="送达时间" width="200">
          <template slot-scope="scope">
            {{ scope.row.deliveryTime }}
          </template>
        </el-table-column>
        <el-table-column prop="remarks" label="用户备注" width="100">
          <template slot-scope="scope">
            {{ scope.row.remarks }}
          </template>
        </el-table-column>
        <el-table-column prop="orderAmount" label="订单金额" width="100">
          <template slot-scope="scope">
            {{ scope.row.orderAmount }}
          </template>
        </el-table-column>
        <el-table-column prop="orderState" label="订单状态" width="100">
          <template slot-scope="scope">
            {{ scope.row.orderState }}
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="100">
          <template slot-scope="scope">
            <el-button
              @click="handleClick((isshow = true))"
              type="text"
              size="small"
              >查看</el-button
            >
            <!-- 点击编辑拿到它的值 -->
            <el-button @click="bianji(scope.row)" type="text" size="small"
              >编辑</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 点击查看的表单 -->
    <el-dialog title="收货地址" :visible.sync="isshow">
      <el-table :data="tableData">
        <el-table-column
          property="orderNo"
          label="订单号"
          width="150"
        ></el-table-column>
        <el-table-column
          property="orderTime"
          label="下单时间"
          width="180"
        ></el-table-column>
        <el-table-column
          property="phone"
          label="手机号"
          width="150"
        ></el-table-column>
        <el-table-column
          property="consignee"
          label="收货人"
          width="150"
        ></el-table-column>
        <el-table-column
          property="deliverAddress"
          label="配送地址"
          width="150"
        ></el-table-column>
        <el-table-column
          property="deliveryTime"
          label="送达时间"
          width="180"
        ></el-table-column>
        <el-table-column
          property="remarKs"
          label="用户备注"
          width="150"
        ></el-table-column>
        <el-table-column
          property="orderAmount"
          label="订单金额"
          width="200"
        ></el-table-column>
        <el-table-column
          property="orderState"
          label="订单状态"
          width="200"
        ></el-table-column>
        <el-table-column property="address" label="地址"></el-table-column>
      </el-table>
    </el-dialog>

    <!-- 编辑 -->
    <el-dialog title="编辑信息" :visible.sync="isshow2">
      <el-form :model="form">
        <el-form-item label="下单时间" label-width="150px">
          <el-input v-model="form.orderTime" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="联系电话" label-width="150px">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="收货人" label-width="150px">
          <el-input v-model="form.consignee" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="送货地址" label-width="150px">
          <el-input v-model="form.deliverAddress" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="送达时间" label-width="150px">
          <el-input v-model="form.deliveryTime" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="备注" label-width="150px">
          <el-input v-model="form.remarks" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="金额" label-width="150px">
          <el-input v-model="form.orderAmount" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="订单状态" label-width="150px">
          <el-select v-model="form.orderState" placeholder="选择订单状态">
            <el-option label="已完成" value="已完成"></el-option>
            <el-option label="已受理" value="已受理"></el-option>
            <el-option label="派送中" value="派送中"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="quxiao">取 消</el-button>
        <el-button type="primary" @click="queding222" >确 定</el-button>
      </div>
    </el-dialog>

    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="curpage"
      :page-size="papage"
      :page-sizes="[1, 5, 10, 50]"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>

import moment from "moment";
import {
 
  apiliscx_js,
 
  apidingdantj_js,
} from "@/utils/api.js";

export default {
  data() {
    return {
      //弹出框
      isshow2: false,
      form: {
        id: "",
        orderNo: "",
        orderTime: "",
        phone: "",
        consignee: "",
        deliverAddress: "",
        deliveryTime: "",
        remarks: "",
        orderAmount: "",
        orderState: "",
      },

      formInline: {
        user: "",
        region: "",
        tel: "",
        pwd: "",
      },
      isshow: false,
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      value1: "",
      value2: "",
      //页数
      curpage: 1,
      //条数
      papage: 10,
      //总条数
      total: 200,

      tableData: [],
    };
  },

  methods: {
    //公共函数
    async getlist() {
      let { data, total } = await apiliscx_js(
        // //发送接口 查询接口

        {
          currentPage: this.curpage,
          pageSize: this.papage,
          orderNo: this.formInline.user,
          consignee: this.formInline.pwd,
          phone: this.formInline.tel,
          orderState: this.formInline.region,
          //这是判断  当它没有时间的时候就重新定义到空  否则就转成字符串
          date: this.value1 == null ? "[]" : JSON.stringify(this.value1),
        }
      );
      //送达时间格式化
      data.forEach((item) => {
        item.deliveryTime = moment(item.deliveryTime).format(
          "YYYY-MM-DD HH:mm:ss"
        );
        item.orderTime = moment(item.orderTime).format("YYYY-MM-DD HH:mm:ss");
      });
    
      this.total = total;
      this.tableData = data;
      



      //通过便利的方式来格式时间的格式

      //边界判定
      if (!data.length && this.curpage > 1) {
        this.curpage--;
        this.getlist();
      }
    },
    //点击查询  可以搜索到具体的某个人的具体物流信息
    async onSubmit() {
      //每次查询到第一页
      this.curpage = 1;
      this.getlist();
    },
    handleClick(row) {
      console.log(row);
    },
    //条数改变时
    handleSizeChange(val) {
      this.papage = val;
      //重绘试图
      this.getlist();
    },
    //页数改变的时候
    handleCurrentChange(res) {
      this.curpage = res;
      this.getlist();
    },
    //编辑函数
    async bianji(row) {
      //获取到当前行的数据
      //发送ajax
      this.form = row;
      //点击取消弹出提示框
      this.isshow2 = true;
 
    },
    //点击成功弹出提示框
    async queding222() {
      //点击确认  修改信息

      
       await apidingdantj_js(
        this.form
        /*         id: this.form.id,
        orderNo: this.form.orderNo,
        orderTime: this.form.orderTime,
        phone: this.form.phone,
        consignee: this.form.consignee,
        deliverAddress: this.form.deliverAddress,
        deliveryTime: this.form.deliveryTime,
        remarks: this.form.remarks,
        orderAmount: this.form.orderAmount,
        orderState: this.form.orderState, */
      );

      this.isshow2 = false;
      //重绘试图
      this.getlist();
      //点击确定修改数据库的消息
    },

    quxiao() {
      this.$message.error("已经取消");
    },
  },
  //制造一个监听器

  //进来就加载它
  created() {
    this.getlist();
  },

};
</script>

<style lang="less" scoped>
html,
body {
  height: 100%;
  width: 100%;
}
.box {
  display: flex;
  margin-top: 20px;
  padding: 0 6px;
  box-sizing: border-box;
}
.block {
  padding: 0 10px;
  box-sizing: border-box;
  align-items: center;
  overflow: hidden;
}
.el-range-editor {
  margin-right: 20px;
}
.demonstration {
  margin-right: 10px;
  color: #606266;
}
.demo-form-inline {
  vertical-align: middle;
}
.box5 {
  margin-top: 30px;
}
.order {
  margin: 10px;
  height: 100%;
  background: #ffffff;
}
.fenye {
  margin-top: 20px;
}
.box6 {
  display: flex;
}
.box7 {
  width: 1300px;
  margin-left: 20px;
}
</style>